<template>
    <div class="write-address">
        <nut-form>
            <nut-form-item label="姓名">
                <nut-input v-model="basicData.userName" class="nut-input-text" placeholder="请输入姓名" type="text" />
            </nut-form-item>
            <nut-form-item label="手机号">
                <nut-input v-model="basicData.userPhone" class="nut-input-text" placeholder="请输入手机号" type="text" />
            </nut-form-item>
            <nut-form-item v-model="address">
                <nut-cell title="收货地址" :desc="address.toString() || '请选择地址'" is-link @click="show"></nut-cell>
                <nut-cascader title="选择省市地区" v-model:visible="showPopup" v-model="address" @change="change"
                    @pathChange="pathChange" :options="options"></nut-cascader>
            </nut-form-item>
            <nut-form-item label="详细地址">
                <nut-textarea placeholder="请输入详细地址" type="text" v-model="basicData.detailAddress" />
            </nut-form-item>
            <nut-form-item label="设为默认地址">
                <nut-switch v-model="basicData.defaultFlag"></nut-switch>
            </nut-form-item>
            <div class="del-address" @click="delAddr" v-if="basicData.addressId">删除地址</div>
        </nut-form>
        <div class="save-Address">
            <nut-button shape="square" type="info" @click="saveAddress">保存</nut-button>
        </div>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { reactive, toRefs, onMounted } from 'vue';
import { postAddress, getPlaceLists, getAddress, uploadAddress, delAddress } from '../../../../api/index'
export default {
    components: {

    },
    setup() {
        const data = reactive({
            basicData: {
                userName: '',
                defaultFlag: false as any,
                userPhone: '',
                detailAddress: '',
                provinceName: '',
                cityName: '',
                regionName: ''
            },
            address: [] as any,
            showPopup: false,
            options: [],
            addressId: '' as any
        });
        const show = () => {
            getPlaceLists().then(res => {
                if (res.resultCode == 200) {
                    data.options = res.data
                    data.showPopup = !data.showPopup
                }
            })
        }
        const change = (...args: any) => {
            //console.log('change', ...args)
        }
        const pathChange = (...args: any) => {
            //console.log('pathChange', ...args)
            //console.log(args[0][0].id)
            data.basicData.provinceName = data.address[0]
            data.basicData.cityName = data.address[1]
            data.basicData.regionName = data.address[2]
        }
        const saveAddress = () => {
            const router = useRouter();
            let params = data.basicData
            params.defaultFlag = params.defaultFlag ? 1 : 0
            if (router.params.addressId) {
                uploadAddress(params).then(res => {
                    if (res.resultCode == 200) {
                        Taro.navigateTo({
                            url: '/packageA/pages/addressList/index?cartItemIds=' + router.params.cartItemIds
                        })
                    }
                })
            } else {
                postAddress(params).then(res => {
                    if (res.resultCode == 200) {
                        Taro.navigateTo({
                            url: '/packageA/pages/addressList/index'
                        })
                    }
                })
            }
        }
        onMounted(() => {
            const router = useRouter();
            if (router.params.id) {
                data.addressId = router.params.addressId
                getAddressDetail(router.params.addressId)
            }
        });
        const getAddressDetail = (id) => {
            getAddress(id).then(res => {
                if (res.resultCode == 200) {
                    data.basicData = res.data
                    data.address = [res.data.provinceName, res.data.cityName, res.data.regionName]
                    data.basicData.defaultFlag = res.data.defaultFlag == 1 ? true : false
                }
            })
        }
        const delAddr = () => {
            delAddress(data.basicData.addressId).then(res => {
                if (res.resultCode == 200) {
                    Taro.showToast({
                        title: '删除成功',
                        icon: 'success',
                        duration: 2000
                    })
                    Taro.navigateTo({
                        url: '/pages/addressList/index'
                    })
                }
            })
        }
        return {
            ...toRefs(data), change, pathChange, show, saveAddress, getAddressDetail, delAddr
        }
    }
};
</script>


<style lang="scss" >
.write-address {
    .nut-cell {
        .nut-cell {
            padding: 0;
        }
    }

    .del-address {
        text-align: center;
        padding: 30rpx 0;
    }

}

.save-Address {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
    width: 100%;
    text-align: center;

    .nut-button {
        width: 400rpx;
        margin: 0 auto;
        border-radius: 10rpx;
    }
}
</style>